.content-bubble {
    width:100px;
    height:200px;
    position:relative;
    background-color:#f4f4f4;
}
.bubble {
    position: absolute;
    left:30px;
    bottom:0;
    width: 40px;
    height: 40px;
    background-repeat: no-repeat;
    background-size: 100%;
    transform-origin: bottom;
}
.b1{
    background-image: url(../assets/img/bg1.png);
    /* 
    这里设置运行时间 4s ;
    采用线性运动 linear，如果有需求当然也可以使用其他曲线，比如 ease;
    每个点赞动画只运行 1 次;
    动画是只需要向前 forwards。
*/
    animation:bubble_y 4s, bubble_big .5s linear 1 forwards ; 
}
/* @keyframes bubble_y {
    0% {
        margin-bottom:0;
    }
    100% {
        margin-bottom:200px;
    }
} */
/* 渐隐效果，使用 opacity 即可。这里我们固定在最后 1/4 开始渐隐。 修改 bubble_y: */

@keyframes bubble_y {
    0% {
        margin-bottom:0;
    }
    100% {
        margin-bottom:200px;
        opacity:0;
    }
}

/* 
增加动画放大效果
在最开始一小段时间，图片由小变大。

于是我们新增一个动画：bubble_big。

这里从 0.3 倍原图放大到 1 倍。这里注意运行时间，比如上面设置，从动画开始到结束总共是 4s，那么这个放大时间就可以按需设置了，比如 0.5s。
 */

/* .bl1 {
    animation: bubble_big 0.5s linear 1 forwards;
} */
@keyframes bubble_big {
    0% {
        transform: scale(.3);
    }
    
    100% {
        transform: scale(1);
    }
}
@keyframes bubble_1 {
    0% {
    }
    25% {
        margin-left:-8px;
    }
    50% {
        margin-left:8px
    }
    75% {
        margin-left:-15px
    }
    100% {
        margin-left:15px
    }
}
